import React from 'react'
import {Card, Icon, Table} from 'antd'
import {fetchPost} from '../../../../utils/request'
import Styles from '../../../finance/common/detail/Index.less'

class CollectionRecord extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      userCode: props.userCode,
      collectionData: [],
      loading: false,
      message: '',
      timer: null
    }
  }

  componentDidMount() {
    console.log('--CollectionRecord-0--');
    this.getData()
  }

  componentWillReceiveProps(props) {
    if (this.state.userCode != props.userCode) {
      this.setState({
        userCode: props.userCode,
        collectionData: []
      }, () => {
        this.getData()
      })
    }
  }

  componentWillUnmount() {
    clearTimeout(this.state.timer)
  }

  getData() {
    this.setState({
      loading: true
    })

    if (this.state.userCode) {
      fetchPost(`/usercollection/overdue/history/${this.state.userCode}/query`, this.state.params).then(json => {
        if (json.code === 0) {
          this.setState({
            collectionData: json.data.itemList,
          })
        } else {
          this.setState({
            collectionData: [],
            message: json.msg
          })
        }
        this.setState({
          loading: false
        })
      })
    } else {
      this.setState({
        collectionData: [],
        loading: false
      })
    }
  }

  message() {
    if (this.state.message) {
      this.state.timer = setTimeout(() => {
        this.setState({
          message: ''
        })
      }, 3000)
      return (
        <span className='color-warning warning-animate'><Icon type='info-circle-o'/> {this.state.message}</span>
      )
    } else {
      return ''
    }
  }

  changeField(field, value) {
    this.setState({
      [field]: value
    })
  }

  render() {
    const collectionColumns = [
      {
        key: 'tradeNo',
        title: 'Loan ID',
        dataIndex: 'tradeNo'
      },
      {
        key: 'followUp',
        title: 'Follow-up Operator',
        dataIndex: 'followUp'
      },
      {
        key: 'followDate',
        title: 'Follow-up Time',
        dataIndex: 'followDate'
      },
      {
        key: 'productDuration',
        title: 'Loan Type',
        dataIndex: 'productDuration'
      },
      {
        key: 'overdueDays',
        title: 'Days Overdue',
        dataIndex: 'overdueDays'
      },
      {
        key: 'type',
        title: 'Operate Type',
        dataIndex: 'type'
      },
      {
        key: 'operateDesc',
        title: 'Content',
        dataIndex: 'operateDesc'
      }
    ]

    const columns = [
      {
        title: 'Product',
        dataIndex: 'sourceMerchantCode',
        key: 'sourceMerchantCode'
      }, {
        title: 'Loan ID',
        key: 'tradeNo',
        dataIndex: 'tradeNo'
      },
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name'
      }, {
        title: 'Mobile',
        dataIndex: 'mobile',
        key: 'mobile'
      }, {
        title: 'Planned Date',
        key: 'repaymentDate',
        dataIndex: 'repaymentDate'
      }, {
        title: 'Loan Amount',
        key: 'realCapital',
        dataIndex: 'realCapital'
      }, {
        title: 'Total amount should repay',
        key: 'expireAmount',
        dataIndex: 'expireAmount'
      }, {
        title: 'Amount already paid',
        key: 'paidAmount',
        dataIndex: 'paidAmount'
      }, {
        title: 'Penalty amount',
        key: 'lateFee',
        dataIndex: 'lateFee'
      }, {
        title: 'Language',
        key: 'userLanguage',
        dataIndex: 'userLanguage'
      }, {
        title: 'Follow Up',
        key: 'followUp',
        dataIndex: 'followUp'
      }
    ]

    return (
      <div style={{overflow: 'auto',}} className={Styles.partLeft}>
        <Card title='Collection record' extra={this.message()} bodyStyle={{padding: 1}} noHovering={true}>
          <Table
            pagination={false}
            size='small'
            columns={columns}
            dataSource={this.state.collectionData}
            bordered
            loading={this.state.loading}
          />
        </Card>
      </div>
    )
  }
}

export default CollectionRecord
